const gulp = require('gulp')
const connect = require('gulp-connect')
const sass = require('gulp-sass')(require('sass'))
const sourcemaps = require('gulp-sourcemaps')
const rename = require('gulp-rename')

gulp.task('html', (done) => {
  gulp.src('*.html').pipe(gulp.dest('dist')).pipe(connect.reload())
  done()
})

gulp.task('js', (done) => {
  gulp.src('js/*.js').pipe(gulp.dest('dist/js')).pipe(connect.reload())
  done()
})

// gulp.task('font', (done) => {
//   gulp.src('font/**/*').pipe(gulp.dest('dist/font')).pipe(connect.reload())
//   done()
// })

gulp.task('sass', (done) => {
  gulp.src('sass/*.scss').pipe(sourcemaps.init()).pipe(sass()).pipe(sourcemaps.write('./')).pipe(gulp.dest('dist/css')).pipe(gulp.dest('css')).pipe(connect.reload())

  done()
})

gulp.task('sassmin', (done) => {
  gulp
    .src('sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(sourcemaps.write('./'))
    // .pipe(gulp.dest('dist/css'))
    .pipe(rename('index.min.css'))
    .pipe(gulp.dest('dist/css'))
    .pipe(connect.reload())

  done()
})

gulp.task('css', (done) => {
  gulp.src('css/*.css').pipe(gulp.dest('dist/css')).pipe(connect.reload())
  done()
})

gulp.task('img', (done) => {
  gulp.src('img/**/*').pipe(gulp.dest('dist/img')).pipe(connect.reload())
  done()
})

gulp.task('server', (done) => {
  connect.server({
    root: 'dist',
    livereload: true,
  })
  done()
})

gulp.task('watch', (done) => {
  gulp.watch('*.html', gulp.series('html'))
  gulp.watch('sass/*.scss', gulp.series('sass', 'sassmin'))
  gulp.watch('js/*.js', gulp.series('js'))
  gulp.watch('img/**/*', gulp.series('img'))
  gulp.watch('css/*.css', gulp.series('css'))
//   gulp.watch('font/**/*', gulp.series('font'))
  done()
})

gulp.task('default', gulp.series('server', 'watch'))